<template>
    <div class="app-container">
      <div class="filter-container">
      <el-button
      class="filter-item"
      type="primary"
      v-perm="'staff-user:add'"
      size="small"
      v-waves
      icon="el-icon-plus"
      @click="handleAdd"
    >添加
    </el-button>
     <div
        style="display:inline-block;margin-left:10px;vertical-align:middle;"
        v-if="~accessable.indexOf('staff-user:import')"
      >
        <el-upload
          accept
          class="upload-demo"
          :on-change="onchangeuploadfile"
          action="/admin/staff_user/import-data"
          :on-success="onImportSuccess"
          :limit="1"
          :show-file-list="false"
        >
          <el-button icon="el-icon-document" size="small" type="primary">导入</el-button>
        </el-upload>
      </div>
        <el-input
        @keyup.enter.native="loadData"
        style="width: 200px;"
        size="small"
        clearable
        class="filter-item"
        placeholder="会员号"
        v-model="queryParams.virtualcard"
      ></el-input>
        <el-button
          class="filter-item"
          type="primary"
          size="small"
          v-waves
          icon="el-icon-search"
          @click="loadData"
        >搜索
        </el-button>
      </div>

      <el-table
        :data="dataList"
        :height="tableHeight"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>

        <el-table-column align="center" prop="virtualcard" label="会员号" width="160"></el-table-column>

        <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>

        <el-table-column align="center" prop="modifyTime" label="修改时间" width="160"></el-table-column>

        <el-table-column align="center" label="操作" width="200" class-name="small-padding">
          <template slot-scope="scope">

            <el-button
              type="primary"
              v-perm="'staff-user:edit'"
              size="mini"
              @click="handleEdit(scope.row)"
            >修改
            </el-button>

            <el-button
              type="danger"
              v-perm="'staff-user:remove'"
              size="mini"
              @click="handleRemove(scope.row)"
            >删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.pageNo"
          :page-sizes="[10,20,30,50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataTotal"
        ></el-pagination>
      </div>
      <el-dialog title="详情" :visible.sync="isCurrentUserLevelShowed">
        <div class="title">
          {{formData.title}}
        </div>
        <div class="content">
          <div v-html="formData.content"></div>
        </div>
      </el-dialog>

      <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="isFormDialogShowed" width="500px">
        <el-form
          class="dialog-form"
          :rules="formRules"
          ref="dataForm"
          :model="formData"
          label-position="left"
          label-width="120px"
        >
            <el-form-item label="会员号" prop="virtualcard">
            <el-input v-model="formData.virtualcard" maxlength="50" placeholder="请输入会员号"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isFormDialogShowed = false">取消</el-button>
          <el-button type="primary" :loading="isSubmiting" @click="handleSubmitForm">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog
      :visible.sync="isImportingExcel"
      width="400px"
      :modal="false"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div
        v-loading="isImportingExcel"
        element-loading-text="正在导入，请等待"
        element-loading-spinner="el-icon-loading"
      >正在导入</div>
    </el-dialog>
    </div>
  </template>

<script>
;
export default {
  name: 'index',
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      formRules: {
        virtualcard: [{
          required: true,
          message: '请输入会员号'
        }],
        createTime: [{
          required: true,
          message: '请输入创建时间'
        }],
        modifyTime: [{
          required: true,
          message: '请输入修改时间'
        }]
      },
      isImportingExcel: false,
      formData: {},
      isSubmiting: false,
      isFormDialogShowed: false,
      isCurrentUserLevelShowed: false,
      dataList: [],
      dataTotal: 0,
      isEditing: false,
      tableHeight: 300
    }
  },
  created () {
    this.tableHeight = window.innerHeight - 300
    this.loadData()
  },
  methods: {
    handleRemove (row) {
      this.$$comfirm('确认删除该记录吗', _ => {
        this.$post('/admin/staff_user/remove-by-id', { id: row.id }).then(_ => {
          this.$$notify()
          this.loadData()
        })
      })
    },
    onchangeuploadfile (file) {
      this.isImportingExcel = true
    },
    handleAdd () {
      this.isFormDialogShowed = true
      this.formData = {}
      this.isEditing = false
    },
    handleViewNote (row) {
      this.formData = row
      this.isCurrentUserLevelShowed = true
    },
    handleAvatarSuccess (imgField) {
      return (res, file) => {
        if (res && res.errcode == 0) {
          this.formData[imgField] = res.info
        }
      }
    },
    onImportSuccess (res, file, list) {
      list.length = 0
      setTimeout(_ => {
        this.$nextTick(_ => {
          this.isImportingExcel = false
        })
      }, 300)
      if (res.errcode === 1) {
        this.$message.error(res.msg)
        return
      }
      this.loadData()
      this.$$notify('导入成功')
    },
    handleEdit (row) {
      this.isFormDialogShowed = true
      this.isEditing = true
      this.formData = Object.assign({}, row)
    },
    handleCurrentChange (pageNo) {
      this.queryParams.pageNo = pageNo
      this.loadData()
    },
    handleSizeChange (pageSize) {
      this.queryParams.pageSize = pageSize
      this.loadData()
    },
    handleSubmitForm () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.isSubmiting = true
          this.$post(this.isEditing ? '/admin/staff_user/update' : '/admin/staff_user/create', this.formData).then(() => {
            this.loadData()
            this.isFormDialogShowed = false
            this.$$notify()
          }).finally(() => {
            this.isSubmiting = false
          })
        }
      })
    },
    loadData () {
      this.listLoading = true
      this.$get('/admin/staff_user/list', this.queryParams).then(data => {
        this.dataList = data.rows
        this.dataTotal = data.total
      }).finally(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

  <style scoped lang="scss">
    .title {
      text-align: center;
      padding: 0 0 20px 0;
      font-size: 20px;
    }

    .content {
      line-height: 2;
    }
  </style>
